<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        clearable
        v-model="queryForm.provinceId"
        class="filter-item"
        filterable
        placeholder="省份"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseProvince', 'query')"
      >
        <el-option
          v-for="(item, index) in provinces"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.cityId"
        class="filter-item"
        filterable
        placeholder="城市"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseCity', 'query')"
      >
        <el-option
          v-for="(item, index) in citys"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.districtId"
        class="filter-item"
        filterable
        placeholder="区"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseRegin', 'query')"
      >
        <el-option
          v-for="(item, index) in districts"
          :key="index"
          :value="item.rowId"
          :label="item.cnName"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.communityId"
        class="filter-item"
        filterable
        placeholder="小区"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseCommunity', 'query')"
      >
        <el-option
          v-for="(item, index) in communitys"
          :key="index"
          :value="item.rowId"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        clearable
        v-model="queryForm.buildId"
        class="filter-item"
        filterable
        placeholder="楼栋"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseBuliding', 'query')"
      >
        <el-option
          v-for="(item, index) in buildings"
          :key="index"
          :value="item.rowId"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        v-model="queryForm.rowId"
        class="filter-item"
        filterable
        placeholder="单元"
        style="width: 125px;"
        @change="value => cascade(value, 'chooseUnit', 'query')"
      >
        <el-option
          v-for="(item, index) in units"
          :key="index"
          :value="item.rowId"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        clearable
        style="width: 150px"
        class="filter-item"
        v-model="queryForm.status"
        placeholder="请选择单元状态"
      >
        <el-option
          v-for="(val, key) in Dicts.CONSUMER_STATUS"
          :key="key"
          :label="val"
          :value="key"
        >
        </el-option>
      </el-select>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入小区名称"
        v-model.trim="queryForm.communityName"
        maxlength="20"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入楼栋名称"
        v-model.trim="queryForm.buildName"
        maxlength="20"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入单元名称"
        v-model.trim="queryForm.unitName"
        maxlength="20"
      >
      </el-input>
      <el-button
        class="filter-item"
        @click="doSearchQuery"
        type="primary"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button
        v-permission="'unit:add'"
        class="filter-item"
        style="margin-left: 10px;"
        @click="openCreateDialog"
        type="success"
        icon="el-icon-plus"
        >新增</el-button
      >
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        @click="openFileDialog()"
        type="info"
        icon="el-icon-upload2"
        v-permission="'deviceStock:import'"
        >批量新增</el-button
      >
    </div>
    <el-table v-loading="loading" :data="records" style="width: 100%">
      <el-table-column prop="rowId" label="单元ID" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="villageName"
        label="省/市/区"
        width="450"
        align="center"
      >
        <template slot-scope="scope">
          <template
            v-if="
              scope.row.townName !== undefined &&
                scope.row.villageName !== undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}/${scope.row.townName}/${scope.row.villageName}`
            }}
          </template>
          <template
            v-if="
              scope.row.townName !== undefined &&
                scope.row.villageName === undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}/${scope.row.townName}`
            }}
          </template>
          <template
            v-if="
              scope.row.townName === undefined &&
                scope.row.villageName === undefined
            "
          >
            {{
              `${scope.row.provinceName}/${scope.row.cityName}/${scope.row.districtName}`
            }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="communityName"
        label="小区名称"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="unitName"
        label="大楼/单元"
        width="250"
        align="center"
      >
        <template slot-scope="scope">
          {{ `${scope.row.buildName}栋/${scope.row.unitName}单元` }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="单元状态"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.CONSUMER_STATUS[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding "
        width="170"
        fixed="right"
      >
        <template slot-scope="scope">
          <!-- <el-button icon="el-icon-search" size="mini" circle></el-button> -->
          <el-button
            type="success"
            icon="el-icon-plus"
            size="mini"
            @click="openAddHouse(scope.row)"
            circle
            title="增加房屋"
            v-permission="'unit:addHouse'"
          ></el-button>
          <el-button
            type="primary"
            size="mini"
            @click="editExample(scope.row)"
            icon="el-icon-edit"
            circle
            title="编辑单元"
            v-permission="'unit:update'"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.rowId)"
            icon="el-icon-delete"
            circle
            title="删除单元"
            v-permission="'unit:delete'"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="`新增单元`"
      :visible.sync="addUnitFormVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addUnitForm"
        label-width="100px"
        :rules="addUnitFormRules"
        ref="addUnitForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="省份" prop="provinceId">
              <el-select
                clearable
                v-model="addUnitForm.provinceId"
                filterable
                placeholder="省份"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseProvince', 'addUnit')"
              >
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼栋:" prop="buildId">
              <el-select
                v-model="addUnitForm.buildId"
                class="filter-item"
                filterable
                placeholder="楼栋"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseBulid', 'addUnit')"
              >
                <el-option
                  v-for="(item, index) in buildings"
                  :key="index"
                  :value="item.rowId"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="城市" prop="cityId">
              <el-select
                clearable
                v-model="addUnitForm.cityId"
                filterable
                placeholder="城市"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseCity', 'addUnit')"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单元名称:" prop="name">
              <el-input
                v-model.trim="addUnitForm.name"
                placeholder="单元名称"
                auto-complete="off"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="区县" prop="districtId">
              <el-select
                clearable
                v-model="addUnitForm.districtId"
                filterable
                placeholder="区县"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseRegin', 'addUnit')"
              >
                <el-option
                  v-for="(item, index) in districts"
                  :key="index"
                  :value="item.rowId"
                  :label="item.cnName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单元状态" prop="status">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="addUnitForm.status"
              >
                <el-option
                  v-for="(val, key) in Dicts.CONSUMER_STATUS"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="小区" prop="communityId">
              <el-select
                clearable
                v-model="addUnitForm.communityId"
                class="filter-item"
                filterable
                placeholder="小区"
                style="width: 100%;"
                @change="value => cascade(value, 'chooseCommunity', 'addUnit')"
              >
                <el-option
                  v-for="(item, index) in communitys"
                  :key="index"
                  :value="item.rowId"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- <el-form-item label="街道" prop="villageId" >
              <el-select v-model="addUnitForm.villageId" placeholder="街道" style="width: 100%;"   @change="(value) => cascade(value, 'chooseVillage', 'addUnit')">
                <el-option v-for="(item, index) in villages" :key="index" :value="item.rowId" :label="item.cnName"></el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addUnitFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUnitForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="`${exampleForm.rowId ? '编辑' : '编辑'}单元`"
      :visible.sync="dialogFormVisible"
      width="20%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="exampleForm"
        label-width="110px"
        :rules="exampleFormRules"
        ref="exampleForm"
      >
        <el-form-item label="单元名称:" prop="name">
          <el-input
            v-model.trim="exampleForm.name"
            placeholder="单元名称"
            auto-complete="off"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="单元状态" prop="status">
          <el-select
            placeholder="可选"
            style="width: 100%;"
            v-model="exampleForm.status"
          >
            <el-option
              v-for="(val, key) in Dicts.CONSUMER_STATUS"
              :key="key"
              :label="val"
              :value="key"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUnit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="`${addHouseForm.unitId ? '新增' : '新增'}房屋`"
      :visible.sync="addHouseVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addHouseForm"
        label-width="100px"
        :rules="addHouseRules"
        ref="addHouseForm"
      >
        <!-- <el-form-item label="小区名称:"  >
            <el-input v-model="addHouseForm.communityName" disabled="true"  auto-complete="off" ></el-input>
           </el-form-item>
           <el-form-item label="楼栋名称:"  >
            <el-input v-model="addHouseForm.buildingName" disabled="true"  auto-complete="off" ></el-input>
           </el-form-item>
           <el-form-item label="单元名称:">
            <el-input v-model="addHouseForm.unitName"  disabled="true" auto-complete="off" ></el-input>
           </el-form-item> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="楼层名称" prop="floorId">
              <el-select
                v-model="addHouseForm.floorName"
                placeholder="楼层"
                style="width: 100%;"
                @change="chooseFloor"
              >
                <el-option
                  v-for="(item, index) in floors"
                  :key="index"
                  :value="item.rowId"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房屋标记" prop="tag">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="addHouseForm.tag"
              >
                <el-option
                  v-for="(val, key) in Dicts.HOUSE_TAG"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="房屋门牌号" prop="number">
              <el-input
                v-model.trim="addHouseForm.number"
                placeholder="房屋门牌号"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开门电话" prop="openPhone">
              <el-input
                v-model.trim="addHouseForm.openPhone"
                placeholder="开门电话"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="呼叫方式" prop="callMode">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="addHouseForm.callMode"
              >
                <el-option
                  v-for="(val, key) in Dicts.CALL_MODE"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房间数量" prop="roomNum">
              <el-input
                v-model.trim="addHouseForm.roomNum"
                placeholder="房间数量"
                auto-complete="off"
                maxlength="5"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="房屋状态" prop="status">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="addHouseForm.status"
              >
                <el-option
                  v-for="(val, key) in Dicts.CONSUMER_STATUS"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addHouseVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveHouse">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="批量新增单元" :visible.sync="fileVisible" width="30%">
      <el-form
        :model="addUnitForm"
        label-width="100px"
        :rules="addUnitFormRules"
        ref="fileForm"
      >
        <el-form-item label="省份" prop="provinceId">
          <el-select
            clearable
            v-model="addUnitForm.provinceId"
            filterable
            placeholder="省份"
            style="width: 100%;"
            @change="value => cascade(value, 'chooseProvince', 'addUnit')"
          >
            <el-option
              v-for="(item, index) in provinces"
              :key="index"
              :value="item.rowId"
              :label="item.cnName"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市" prop="cityId">
          <el-select
            clearable
            v-model="addUnitForm.cityId"
            filterable
            placeholder="城市"
            style="width: 100%;"
            @change="value => cascade(value, 'chooseCity', 'addUnit')"
          >
            <el-option
              v-for="(item, index) in citys"
              :key="index"
              :value="item.rowId"
              :label="item.cnName"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="区县" prop="districtId">
          <el-select
            clearable
            v-model="addUnitForm.districtId"
            filterable
            placeholder="区县"
            style="width: 100%;"
            @change="value => cascade(value, 'chooseRegin', 'addUnit')"
          >
            <el-option
              v-for="(item, index) in districts"
              :key="index"
              :value="item.rowId"
              :label="item.cnName"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="小区" prop="communityId">
          <el-select
            v-model="addUnitForm.communityId"
            filterable
            class="filter-item"
            placeholder="小区"
            style="width: 100%;"
            @change="value => cascade(value, 'chooseCommunity', 'addUnit')"
          >
            <el-option
              v-for="(item, index) in communitys"
              :key="index"
              :value="item.rowId"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="楼栋:" prop="buildId">
          <!-- <el-autocomplete clearable v-model="addUnitForm.buildName" class="filter-item" placeholder="楼栋" style="width: 100%;" :fetch-suggestions="addQuerySearchBuilding" @select="addHandleSelect" @clear="addClear">
              </el-autocomplete> -->
          <el-select
            v-model="addUnitForm.buildId"
            class="filter-item"
            filterable
            placeholder="楼栋"
            style="width: 100%;"
            @change="value => cascade(value, 'chooseBulid', 'addUnit')"
          >
            <el-option
              v-for="(item, index) in buildings"
              :key="index"
              :value="item.rowId"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单元模板" prop="file">
          <el-row>
            <el-col :span="12">
              <el-upload
                class="upload-demo"
                action=""
                :limit="1"
                ref="avatarInput"
                :on-change="handleChange"
                :auto-upload="false"
                accept="execl"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取文件</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  只能上传xls文件,替换文件请先移除已选中的文件
                </div>
              </el-upload>
            </el-col>
            <el-col :span="12">
              <el-button
                type="primary"
                size="small"
                onclick="location.href='http://keisdom.oss-cn-hangzhou.aliyuncs.com/templates/unit_template_v1.0.xls'"
                >下载模板</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fileVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadFile">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryUnit,
  deleteUnit,
  querUnitDetail,
  saveUnit,
  uploadUnitFile,
  saveHouse,
  getFloor,
  querFloorDetail,
  selectAllCommunity,
  selectByCommunityIdBuilding,
  selectByBuildingUnit
} from '@/api/community'
import { queryProvince, getCity, getDistrict } from '@/api/area'

export default {
  name: 'unit',
  data() {
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('门牌号不能为空'))
      }
      if (!/^[0-9]{4}$/.test(value)) {
        callback(new Error('请输入4位数字'))
      } else {
        callback()
      }
    }
    var checkPhone = (rule, value, callback) => {
      if (value) {
        if (
          !(
            /^((0\d{2,3})-?)(\d{7,8})(-(\d{3,}))?$/.test(value) ||
            /^(1[345789]\d{9})$/.test(value)
          )
        ) {
          callback(new Error('请输入正确的号码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var checkNum = (rule, value, callback) => {
      if (value) {
        if (!/^[0-9]+$/.test(value)) {
          callback(new Error('请输入数字'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      addHouseVisible: false,
      fileVisible: false,
      loading: false,
      dialogFormVisible: false,
      addUnitFormVisible: false,
      addUnitForm: [],
      exampleForm: [
        {
          rowId: undefined,
          provinceId: '',
          provinceName: '',
          cityId: '',
          districtId: '',
          townId: '',
          villageId: '',
          name: '',
          code: '',
          type: '',
          status: '',
          tel: ''
        }
      ],
      addHouseForm: [
        {
          rowId: undefined
        }
      ],
      provinces: [],
      citys: [],
      districts: [],
      floors: [],
      communitys: [],
      buildings: [],
      units: [],
      exampleFormRules: {
        name: [{ required: true, message: '请输入单元名称', trigger: 'blur' }]
      },
      addUnitFormRules: {
        name: [{ required: true, message: '请输入单元名称', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择单元状态', trigger: 'change' }
        ]
      },
      addHouseRules: {
        number: [{ validator: checkCode, trigger: 'blur' }],
        callMode: [
          { required: true, message: '请选择呼叫方式', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择房屋状态', trigger: 'change' }
        ],
        openPhone: [{ validator: checkPhone, trigger: 'blur' }],
        roomNum: [{ validator: checkNum, trigger: 'blur' }]
      },
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        ascs: '',
        descs: '',
        importance: undefined,
        title: undefined,
        cnName: undefined
      },
      records: []
    }
  },
  created() {
    this.doQuery()
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      this.queryForm.ascs = ''
      this.queryForm.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryForm.ascs = column.sortBy
        } else {
          this.queryForm.descs = column.sortBy
        }
      }
      this.queryForm.current = 0
      this.doQuery()
    },
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doSearchQuery() {
      this.queryForm.current = 1
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      queryUnit(this.queryForm).then(({ data: { data } }) => {
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
      queryProvince().then(({ data: { data } }) => {
        this.provinces = data
        this.loading = false
      })
    },
    handleDelete(rowId) {
      this.$confirm('此操作将永久删除该单元, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUnit(rowId).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    openCreateDialog() {
      this.exampleForm = {}
      this.citys = []
      this.districts = []
      this.towns = []
      this.villages = []
      this.communitys = []
      this.buildings = []
      this.addUnitForm = {}
      this.addUnitFormVisible = true
      this.$refs.addUnitForm && this.$refs.addUnitForm.resetFields()
    },
    saveUnitForm() {
      this.$refs.addUnitForm.validate(valid => {
        if (valid) {
          if (
            this.addUnitForm.buildId === '' ||
            this.addUnitForm.buildId === undefined
          ) {
            this.$message({
              showClose: true,
              message: '请选择楼栋',
              type: 'warning'
            })
          } else {
            saveUnit(this.addUnitForm).then(({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doQuery()
                this.addUnitFormVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            })
          }
        } else {
          return false
        }
      })
    },
    openFileDialog() {
      this.addBulidForm = {}
      this.citys = []
      this.districts = []
      this.towns = []
      this.villages = []
      this.communitys = []
      this.buildings = []
      this.fileForm = {}
      this.fileVisible = true
      this.$refs.fileForm && this.$refs.fileForm.resetFields()
    },
    uploadFile() {
      const excle = new FormData()
      excle.append('file', this.fileForm.param)
      excle.append('communityName', this.addUnitForm.communityName)
      excle.append('cityId', this.addUnitForm.cityId)
      excle.append('communityId', this.addUnitForm.communityId)
      excle.append('provinceId', this.addUnitForm.provinceId)
      excle.append('districtId', this.addUnitForm.districtId)
      excle.append('buildId', this.addUnitForm.buildId)
      excle.append('buildName', this.addBulidForm.buildingName)
      uploadUnitFile(excle).then(({ data: { data, msg } }) => {
        this.fileVisible = false
        this.$refs.avatarInput.clearFiles()
        this.doQuery()
        this.$message({
          showClose: true,
          message: '导入成功',
          type: 'success'
        })
      })
    },
    handleChange(file, fileList) {
      if (
        file.name.substring(file.name.lastIndexOf('.'), file.name.length) !==
        '.xls'
      ) {
        this.$message({
          showClose: true,
          message: '只能上传xls文件',
          type: 'error'
        })
        this.$refs.avatarInput.clearFiles()
        return
      }
      this.fileForm.param = file.raw
    },
    editExample({ rowId }) {
      this.exampleForm = {}
      this.$refs.exampleForm && this.$refs.exampleForm.resetFields()
      querUnitDetail(rowId).then(({ data: { code, data, msg } }) => {
        this.dialogFormVisible = true
        if (code === 0) {
          this.exampleForm = {
            rowId: data.rowId,
            name: data.name,
            code: data.code,
            status: data.status
          }
        }
      })
    },
    editUnit() {
      this.$refs.exampleForm.validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          saveUnit(this.exampleForm).then(({ data: { data, msg, code } }) => {
            if (code === 0) {
              this.doQuery()
            }
            this.$message({
              showClose: true,
              message: msg,
              type: code === 0 ? 'success' : 'error'
            })
          })
        } else {
          return false
        }
      })
    },
    openAddHouse({ rowId }) {
      this.addHouseVisible = true
      this.addHouseForm = {}
      this.$refs.addHouseForm && this.$refs.addHouseForm.resetFields()
      querUnitDetail(rowId).then(({ data: { code, data, msg } }) => {
        this.addHouseForm = {
          buildingId: data.buildingId,
          communityId: data.communityId,
          communityName: data.communityName,
          buildingName: data.buildingName,
          unitId: data.rowId,
          unitName: data.name
        }
      })
      getFloor(rowId).then(({ data: { data } }) => {
        this.floors = data
        this.loading = false
      })
    },
    chooseFloor(rowId) {
      const data = this.floors.find(item => item.rowId === rowId)
      querFloorDetail(data.rowId).then(({ data: { code, data, msg } }) => {
        this.addHouseForm.floorId = data.rowId
        this.addHouseForm.floorName = data.name
      })
    },
    saveHouse() {
      this.$refs.addHouseForm.validate(valid => {
        if (valid) {
          this.addHouseVisible = false
          saveHouse(this.addHouseForm).then(({ data: { data, msg, code } }) => {
            if (code === 0) {
              this.doQuery()
            }
            this.$message({
              showClose: true,
              message: msg,
              type: code === 0 ? 'success' : 'error'
            })
          })
        } else {
          return false
        }
      })
    },
    cascade(rowId, level, param) {
      if (param === 'query') {
        if (rowId !== '') {
          switch (level) {
            case 'chooseProvince':
              getCity(rowId).then(({ data: { data } }) => {
                this.queryForm.cityId = ''
                this.queryForm.districtId = ''
                this.queryForm.communityId = ''
                this.queryForm.buildId = ''
                this.queryForm.rowId = ''
                this.citys = []
                this.districts = []
                this.communitys = []
                this.buildings = []
                this.units = []
                this.citys = data
              })
              return
            case 'chooseCity':
              getDistrict(rowId).then(({ data: { data } }) => {
                this.queryForm.districtId = ''
                this.queryForm.communityId = ''
                this.queryForm.buildId = ''
                this.queryForm.rowId = ''
                this.districts = []
                this.communitys = []
                this.buildings = []
                this.units = []
                this.districts = data
              })
              return
            case 'chooseRegin':
              selectAllCommunity(rowId).then(({ data: { data } }) => {
                this.queryForm.communityId = ''
                this.queryForm.buildId = ''
                this.queryForm.rowId = ''
                this.communitys = []
                this.buildings = []
                this.units = []
                this.communitys = data
              })
              return
            case 'chooseCommunity':
              selectByCommunityIdBuilding(rowId).then(({ data: { data } }) => {
                this.queryForm.buildId = ''
                this.queryForm.rowId = ''
                this.buildings = []
                this.units = []
                this.buildings = data
              })
              return
            case 'chooseBuliding':
              selectByBuildingUnit(rowId).then(({ data: { data } }) => {
                this.queryForm.rowId = ''
                this.units = []
                this.units = data
              })
              return
            case 'chooseUnit':
              selectByBuildingUnit(this.queryForm.buildId).then(
                ({ data: { data } }) => {
                  this.units = data
                }
              )
              return
          }
        } else {
          switch (level) {
            case 'chooseProvince':
              this.queryForm.cityId = ''
              this.queryForm.districtId = ''
              this.queryForm.communityId = ''
              this.queryForm.buildId = ''
              this.queryForm.rowId = ''
              this.citys = []
              this.districts = []
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseCity':
              this.queryForm.districtId = ''
              this.queryForm.communityId = ''
              this.queryForm.buildId = ''
              this.queryForm.rowId = ''
              this.districts = []
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseRegin':
              this.queryForm.communityId = ''
              this.queryForm.buildId = ''
              this.queryForm.rowId = ''
              this.communitys = []
              this.buildings = []
              this.units = []
              return
            case 'chooseCommunity':
              this.queryForm.buildId = ''
              this.queryForm.rowId = ''
              this.buildings = []
              this.units = []
              return
            case 'chooseBuliding':
              this.queryForm.rowId = ''
              this.units = []
              return
          }
        }
      } else if (param === 'addUnit') {
        if (rowId !== '') {
          switch (level) {
            case 'chooseProvince':
              getCity(rowId).then(({ data: { data } }) => {
                this.addUnitForm.cityId = ''
                this.addUnitForm.districtId = ''
                this.addUnitForm.communityId = ''
                this.addUnitForm.buildId = ''
                this.citys = []
                this.districts = []
                this.communitys = []
                this.buildings = []
                this.citys = data
              })
              return
            case 'chooseCity':
              getDistrict(rowId).then(({ data: { data } }) => {
                this.addUnitForm.districtId = ''
                this.addUnitForm.communityId = ''
                this.addUnitForm.buildId = ''
                this.districts = []
                this.communitys = []
                this.buildings = []
                this.districts = data
              })
              return
            case 'chooseRegin':
              selectAllCommunity(rowId).then(({ data: { data } }) => {
                this.addUnitForm.communityId = ''
                this.addUnitForm.buildId = ''
                this.communitys = []
                this.buildings = []
                this.communitys = data
              })
              return
            case 'chooseCommunity':
              selectByCommunityIdBuilding(rowId).then(({ data: { data } }) => {
                this.addUnitForm.buildId = ''
                this.buildings = []
                this.buildings = data
                const datas = this.communitys.find(item => item.rowId === rowId)
                this.addUnitForm.communityName = datas.name
              })
              return
            case 'chooseBulid':
              selectByCommunityIdBuilding(this.addUnitForm.communityId).then(
                ({ data: { data } }) => {
                  const datas = this.buildings.find(
                    item => item.rowId === rowId
                  )
                  this.addUnitForm.buildName = datas.name
                  this.buildings = data
                }
              )
              return
          }
        } else {
          switch (level) {
            case 'chooseProvince':
              this.addUnitForm.cityId = ''
              this.addUnitForm.districtId = ''
              this.addUnitForm.communityId = ''
              this.addUnitForm.buildId = ''
              this.citys = []
              this.districts = []
              this.communitys = []
              this.buildings = []
              return
            case 'chooseCity':
              this.addUnitForm.districtId = ''
              this.addUnitForm.communityId = ''
              this.addUnitForm.buildId = ''
              this.districts = []
              this.communitys = []
              this.buildings = []
              return
            case 'chooseRegin':
              this.addUnitForm.communityId = ''
              this.addUnitForm.buildId = ''
              this.communitys = []
              this.buildings = []
              return
            case 'chooseCommunity':
              this.addUnitForm.buildId = ''
              this.buildings = []
              return
          }
        }
      }
    }
  },
  components: {}
}
</script>

<style scoped>
.upload-demo {
  line-height: 32px;
}
</style>
